<template>
	<view class="Headercontainer">
		<span class="select" :class="{active:selected===1}" @click="checkout(1)">货源大厅</span>
		<span class="select" :class="{active:selected===2}" @click="checkout(2)">专属货源</span>
		<span class="select" :class="{active:selected===3}" @click="checkout(3)">收藏货源</span>
	</view>
	<!-- <u-button type="primary" size="medium">主要按钮</u-button> -->
</template>

<script>
	export default {
		props:['num'],
		data() {
			return {
				selected:1,//选中的标识
			}
		},
		watch:{
			num(val){
				this.selected = val*1
			}
		},
		methods: {
			checkout(num){
				if(this.selected === num){
					return
				}else if(num === 1){
					this.selected = num
					wx.reLaunch({
					  url:'/pages/components/Header/Header'
					})
				}else if(num===2){
					this.selected = num
					wx.reLaunch({
					  url:`/pages/select/select?selected=`+num
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.Headercontainer{
		width: 300px;
		display: flex;
		margin: auto;
		border: 1px solid #562fe2;
		border-right: none;
		.select{
			height: 35px;
			flex: 1;
			box-sizing: border-box;
			border-right: 1px solid #562fe2;
			text-align: center;
			line-height: 35px;
			font-size: 14px;
		}
		.active{
			background: blue;
			color: #FFFFFF;
		}
	}
</style>
